<template>
	<div>
		<el-row>
			<el-col>
				<el-form :model="formData" ref="formDataRef" :rules="rules" label-width="120px">
					<el-row>
						<el-col :span="12">
							<el-form-item label="部门/公司 :" prop="CompanyId">
								<el-select v-model="formData.CompanyId" style="width: 100%;" placeholder="请选择部门/公司"
									@change="CompanyChangeEvent" filterable>
									<el-option v-for="item in CompanyList" :value="item.Id" v-show="!item.Delete"
										:label="item.CompanyName"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="银行卡:" prop="BankId">
								<el-select v-model="formData.BankId" style="width: 100%;" placeholder="银行卡" disabled
									filterable>
									<el-option v-for="item in BankList" :value="item.Id" v-show="!item.Delete"
										:label="item.BankName +'-'+item.BankNumber"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="项目:" prop="ProjectId">
								<el-select v-model="formData.ProjectId" style="width: 100%;" placeholder="请选择项目"
									filterable>
									<el-option v-for="item in ProjectList" :value="item.Id" v-show="!item.Delete"
										:label="item.ProjectName"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="供应商/经办人:" prop="SupplierId">
								<el-select v-model="formData.SupplierId" style="width: 100%;" placeholder="请选择供应商/经办人"
									filterable>
									<el-option v-for="item in SupplierList" :value="item.Id" v-show="!item.Delete"
										:label="item.Name"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="费用的类型:" prop="CostTypeId">
								<el-select v-model="formData.CostTypeId" style="width: 100%;" placeholder="请选择费用的类型"
									filterable>
									<el-option v-for="item in CostTypeList" :value="item.Id" v-show="!item.Delete"
										:label="item.CostName"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="开始时间:" prop="CreateDate">
								<el-date-picker v-model="formData.CreateDate" type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始时间"
									style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="摘要:" prop="Abstract">
								<el-input v-model="formData.Abstract" type="textarea"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="银行收入:" prop="BankIn">
								<el-input v-model="formData.BankIn"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="银行支出:" prop="BankOut">
								<el-input v-model="formData.BankOut"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-show="formData.CompanyId == 12">
						<el-col :span="12">
							<el-form-item label="现金收入:" prop="MoneyIn">
								<el-input v-model="formData.MoneyIn"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="现金支出:" prop="MoneyOut">
								<el-input v-model="formData.MoneyOut"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="是否有发票:" prop="invoice">
								<el-radio-group v-model="formData.invoice">
									<el-radio :label="1">是</el-radio>
									<el-radio :label="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="是否有合同:" prop="contract">
								<el-radio-group v-model="formData.contract">
									<el-radio :label="1">是</el-radio>
									<el-radio :label="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24" align="right">
							<el-form-item>
								<el-button type="primary" @click="insertHandler">添加</el-button>
							</el-form-item>
						</el-col>
					</el-row>

				</el-form>
			</el-col>
		</el-row>
		<el-dialog :visible.sync="dialogShow" title="提示" style="z-index:2000000"  append-to-body top="18vh" width="400px">
			<el-form :model="formData" label-width="100px" :rules="rules" >
				<el-row>
					<el-col :span="12">
						<el-form-item label="银行收入:" prop="BankIn">
							<!-- <el-input v-model="formData.BankIn"></el-input> -->
							{{ formData.BankIn }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="银行支出:" prop="BankOut">
								{{ formData.BankOut }}
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-show="formData.CompanyId == 12">
					<el-col :span="12">
						<el-form-item label="现金收入:" prop="MoneyIn">
								{{ formData.MoneyIn }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="现金支出:" prop="MoneyOut">
							{{ formData.MoneyOut }}
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col align="right">
						<el-button @click="insertHandlerSubmit()" type="primary">提交</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import {
		CheckAmount
	} from '../../../public/Scriput/Public'
	import dayjs from 'dayjs'
	var priceRule = (rule, value, callback) => {
		if (value == '' && value != 0) callback(new Error('请输入金额'))
		else if (!CheckAmount(value)) callback(new Error('请填写有效的金额(保留两位小数)'))
		else callback()
	};
	export default {
		props: {
			closeFun: {
				type: Function,
				required: true
			},
			isShow: {
				type: Boolean,
				required: true
			},
			CompanyList: {
				typeo: Array,
				required: true
			},
			ProjectList: {
				typeo: Array,
				required: true
			},
			BankList: {
				typeo: Array,
				required: true
			},
			SupplierList: {
				typeo: Array,
				required: true
			},
			CostTypeList: {
				typeo: Array,
				required: true
			},
		},
		data() {
			return {
				formData: {
					CostTypeId: '',
					CreateDate: null,
					CompanyId: '',
					ProjectId: '',
					BankId: '',
					SupplierId: '',
					Abstract: "",
					BankIn: 0,
					BankOut: 0,
					MoneyIn: 0,
					MoneyOut: 0,
					invoice: 1,
					contract: 1
				},
				rules: {
					CompanyId: [{
						required: true,
						message: '请选择部门/公司',
						trigger: 'change'
					}],
					ProjectId: [{
						required: true,
						message: '请选择项目',
						trigger: 'change'
					}],
					// SupplierId: [{
					// 	required: true,
					// 	message: '请选择合作方',  
					// 	trigger: 'change'
					// }],
					CostTypeId: [{
						required: true,
						message: '请选择费用的类型',
						trigger: 'change'
					}],
					CreateDate: [{
						required: true,
						message: '请选择开始时间',
						trigger: 'change'
					}],
					BankIn: [{
						trigger: 'blur',
						validator: priceRule
					}],
					BankOut: [{
						trigger: 'blur',
						validator: priceRule
					}],
					MoneyIn: [{
						trigger: 'blur',
						validator: priceRule
					}],
					BankOut: [{
						trigger: 'blur',
						validator: priceRule
					}],
				},
				CompanyList: [],
				ProjectList: [],
				BankList: [],
				SupplierList: [],
				dialogShow:false,
			}
		},
		watch: {
			isShow: {
				handler(value) {
					if (value) {
						this.formData.CostTypeId = this.$store.state.formData.CostTypeId == '' ? '' : this.$store.state
							.formData.CostTypeId
						this.formData.CreateDate = this.$store.state.formData.CreateDate == '' ? '' : this.$store.state
							.formData.CreateDate
					}
				},
				immediate: true,
			}
		},
		methods: {
			insertHandler() {
				this.$refs.formDataRef.validate(valid => {
					this.formData.CreateDate = dayjs(this.formData.CreateDate).add(3, 'second').format(
						'YYYY-MM-DD HH:mm:ss')
					if(valid) this.dialogShow = true
				})
			},
			insertHandlerSubmit() {
				this.dialogShow = false;
				this.$http.post('/api/Expenditure/Insert/insert', {
					...this.formData,
					SupplierId: this.formData.SupplierId == '' ? 0 : this.formData.SupplierId,
					MoneyIn: this.formData.MoneyIn == '' ? 0 : parseFloat(this.formData.MoneyIn),
					MoneyOut: this.formData.MoneyOut == '' ? 0 : parseFloat(this.formData.MoneyOut),
					BankIn: this.formData.BankIn == '' ? 0 : parseFloat(this.formData.BankIn),
					BankOut: this.formData.BankOut == '' ? 0 : parseFloat(this.formData.BankOut),
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					this.$store.commit('setformData', this.formData)
					if (StatusCode == 200) {
						this.$message.success('添加成功')
						this.resetFieldsEvent()
						this.$parent.$parent.dialogAddForm.show = false
						this.closeFun()
					} else {
						this.$message.warning(Message)
					}
				})
			},
			resetFieldsEvent() {
				this.$refs.formDataRef.resetFields()
			},
			CompanyChangeEvent(value) {
				let obj = this.CompanyList.find(x => x.Id == value)
				this.formData.BankId = obj.BankId
				if(value != 12){
					this.formData.MoneyIn = 0						
					this.formData.MoneyOut = 0					
				}
			}
		}
	}
</script>

<style>
</style>